
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小协议</title>
    <meta id="i18n_pagename" content="message">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://static.medishares.net/css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="https://static.medishares.net/css/common.css?v=2018082901">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="https://static.medishares.net/js/vue.min.js"></script>
    <script src="https://static.medishares.net/js/common.js?v=2018082901"></script>
</head>
<body>
<div class="mds-group">
    <link href="https://static.medishares.net/css/market/qixi2018.css" rel="stylesheet">
<div class="qixi">
	<div class="card">
		<textarea maxlength="256" class="protocol" placeholder="新建一份区块链协议…" onchange="this.value=this.value.substring(0, 256)" onkeydown="this.value=this.value.substring(0, 256)"></textarea>
		<span class="number"><span class="written"></span><span class="slash"> / </span>256</span>
		<div class="encryption">
			<div class="right">手续费 0.0001 EOS</div>
			<span>加密</span>
		</div>
		<a href="javascript:;" class="confirm">生成协议</a>
	</div>
	<div class="my-protocol right-align">
		<a href="javascript:;" id="all" >全部协议</a>&nbsp;&nbsp;
		<a href="javascript:;" id="mine">我的协议</a>
	</div>
	<div style="clear: both;"></div>
	<ul class="qixi-about">
		<li>
			<h3>关于小协议</h3>
			<div>只需要 1秒钟，你就能创建一份不可篡改的协议，区块链技术将永久保存你的承诺。</div>
		</li>
		<li>
			<h3>小协议应用场景</h3>
			<ul class="application">
				<li>环游世界的协议</li>
				<li>老公给老婆做饭协议</li>
				<li>我要成功减肥二十斤的协议…</li>
			</ul>
		</li>
		<li>
			<h3>关于加密</h3>
			<div>加密后区块链上仅保存协议原文的 Hash 值，不可解密，仅作为原文校验的存证。</div>
		</li>
	</ul>
</div>

<!-- loading -->
<div id="app_loading" v-bind:class="{hide:!loading}"></div>
<!-- 额外js -->
<script src='https://static.medishares.net/js/plugins/lottie_light.min.js'></script>
<script type="text/javascript">
  $(function(){
    lottie.loadAnimation({
      container: $('#app_loading')[0], // the dom element that will contain the animation
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'https://static.medishares.net/js/plugins/loading.json' // the path to the animation json
    });
  })
</script>

<script src="js/md5.js"></script>

<!-- import eosjs & mds-eosjs plugin -->
<script src="js/eos.min.js"></script>
<script src="js/jquery.mdseos.js"></script>

<script type="text/javascript">

	var pageData = {
		// pageInit : true,
	  loading : true
	}

	var vote1Vue = new Vue({
	  el: '.mds-group',
	  data: pageData,
	})

	$(function(){

    $.mdseos.init(
      {"nodes":[
        {"jsonRpc":"https:\/\/jungle.eosio.cr","chainID":"038f4b0fc8ff18a4f0842a8f0564611f6e96e8535901dd45e43ac8691a1c4dca"}, // 0: jungle-testnet-node
        {"jsonRpc":"https:\/\/mainnet.eoscannon.io","chainID":"aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906"}  // 1: mainnet-node, https may needed
      ]});

  	$.mdseos.app_get_account(function(){
  		pageData.loading = false;
  	});

		// 发起交易
		$('.confirm').on('click',function(){
			$.mdseos.app_get_account(function(){
	  		account = $.mdseos.getAccount();
	  		permission = $.mdseos.getAccountPermission();

	  	  var mdseos = $.mdseos.getEos();

	  	  var comment = $('textarea').val();
	  	  if( computeByteSize(comment) > 256 ){
	  	  	alert('最多只能写256个字节哦~');
	  	  	return false;
	  	  }
	  	  if( $('.checked').length==1 ){
	  	  	comment = hex_md5(comment);
	  	  }

	  	  //发起购买交易
	  	  var transaction = mdseos.transaction({
	  	    actions:[
	  	      {
	  	        account: 'eosio.token',
	  	        name: 'transfer',
	  	        authorization: [{
	  	          actor: account,
	  	          permission: permission
	  	        }],
	  	        data: {
	  	          from: account,
	  	          to: 'eosxiaoxieyi',
	  	          quantity: '0.0001 EOS',
	  	          memo: comment
	  	        }
	  	      }
	  	    ]
	  	  },function(error, result){
	  	    if(error){
	  	      alert( JSON.parse(error).error.details[0].message );
	  	    }else{
	  	      alert('小协议创建成功！');
	  	      window.location.reload();
	  	    }
	  	  });
	  	 });
    });

    // 我的协议
    $('#mine').on('click',function(){
    	var account = $.mdseos.getAccount();
    	window.location.href='http://eosmonitor.io/account/'+account;
    })

    $('#all').on('click',function(){
    	var account = $.mdseos.getAccount();
    	window.location.href='http://eosmonitor.io/account/eosxiaoxieyi';
    })

		// 页面相关
		$('.encryption').on('click',function(){
			$(this).toggleClass('checked');
		})

		$(".protocol").bind('input propertychange',function(e){
			var str = $(this).val(),len = computeByteSize(str);
			$('.written').html(len)
			$('.written').show();
			$('.slash').show();
			if(len>256){
				$('.written').addClass('warn');
			}else{
				$('.written').removeClass('warn')
			}
  	})
		// 计算指定字符串的字节数
		function computeByteSize(str){
		  for (var i=0,byte=0; i < str.length; i++) {
		  	var charCode = str.charCodeAt(i);
		    if (0 <= charCode && charCode <= 0x7f) {
			    byte += 1;
			  } else if (128 <= charCode && charCode <= 0x7ff) {
			    byte += 2;
			  } else if (2048 <= charCode && charCode <= 0xffff) {
			    byte += 3;
			  } else if (65536 < charCode && charCode <= 0x1FFFFF) {
			    byte += 4;
			  } else if (0x200000 < charCode && charCode <= 0x3FFFFFF) {
			    byte += 5;
			  } else if (0x4000000 < charCode && charCode <= 0x7FFFFFFF) {
			    byte += 6;
			  }
		  }
		  return byte
		}

	})
</script>

</div>
</body>
</html>
